<template>
  <div class="header-container flex">
    <!-- logo部分 -->
    <section class="logo flex">
      <div class="logo-img">
        <img v-if="logo" :src="logo" alt="" />
      </div>
      <h2 class="logo-title">{{ title }}</h2>
    </section>

    <!-- user部分 -->
    <section class="user flex">
      <div class="user-avatar">
        <img :src="face" alt="" />
      </div>
      <p class="user-name">{{ username }}</p>
      <el-dropdown trigger="click" @command="onChecked">
        <el-button
          type="default"
          icon="el-icon-arrow-down"
          circle
          size="mini"
        ></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user" command="info">
            个人信息
          </el-dropdown-item>
          <el-dropdown-item icon="el-icon-key" command="password">
            修改密码
          </el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="switch">
            切换账号
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <td-layer
        title="个人信息"
        top="10vh"
        :visible.sync="dialogInfoBoolean"
        width="850px"
        :before-close="beforeClose"
      >
        <user-info
          :visible="dialogInfoBoolean"
          @submit="onCloseInfo"
        ></user-info>
      </td-layer>

      <td-layer
        title="修改密码"
        top="10vh"
        :visible.sync="dialogPassBoolean"
        width="850px"
        :before-close="beforeClose"
      >
        <user-pass
          :visible="dialogPassBoolean"
          @submit="onClosePass"
        ></user-pass>
      </td-layer>
    </section>
  </div>
</template>

<script>
import userInfo from "./UserInfo";
import userPass from "./UserPass";

var baseUrl = process.env.VUE_APP_BASE_API;
var _face = require("../assets/user-avatar.jpg");
console.log(_face);
export default {
  components: { userInfo, userPass },
  data() {
    return {
      title: "",
      logo: "",
      face: "",
      username: "",
      dialogInfoBoolean: false, // 个人信息
      dialogPassBoolean: false // 个人密码
    };
  },

  mounted() {
    const sysInfo = JSON.parse(localStorage.getItem("sysCompany"));
    this.title = (sysInfo && sysInfo.name) || "成都行行行科技有限公司";
    this.logo = sysInfo && sysInfo.logo ? baseUrl + sysInfo.logo : null;
    this.face = localStorage.getItem("icon")
      ? baseUrl + localStorage.getItem("icon")
      : _face;
    this.username = localStorage.getItem("username");
  },

  methods: {
    onChecked(status) {
      switch (status) {
        case "info":
          console.log("info");
          this.dialogInfoBoolean = true;
          break;
        case "password":
          this.dialogPassBoolean = true;
          break;
        case "switch":
          localStorage.removeItem("token");
          this.$router.push({
            path: "/login",
            query: {
              pathFrom: this.$route.path
            }
          });
          break;
      }
    },
    beforeClose() {
      this.dialogInfoBoolean = false;
      this.dialogPassBoolean = false;
    },
    onCloseInfo() {
      this.beforeClose();
      this.face = localStorage.getItem("icon")
        ? baseUrl + localStorage.getItem("icon")
        : _face;
    },
    onClosePass(bool) {
      this.beforeClose();
      if (bool) {
        localStorage.removeItem("token");
        this.$router.push({
          path: "/login",
          query: {
            pathFrom: this.$route.path
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.header-container {
  height: 65px;
  padding: 0 60px 0 30px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 6px 4px #eee;

  .logo {
    &-img img {
      width: 60px;
      height: 60px;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &-title {
      margin-left: 20px;
      color: #333;
      line-height: 64px;
			font-size: 18px;
    }
  }

  .user {
    align-items: center;

    &-avatar img {
      width: 48px;
      height: 48px;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &-name {
      margin: 0 20px;
      color: #333;
			font-size: 14px;
    }
  }
}
</style>
